<template>
  <div class="app-container" :style="setBgColor(albumpic_big)">
    <div class="equipment">
      <x-tabs
        title="选择设备"
        :list="equipmentList"
        label="equipmentName"
        :shadow="false"
        :required="true"
        @tab-click="changeEquipmen" />
      <div class="form">
        <el-form ref="searchForm" :model="searchForm" size="mini" class="searchForm">
          <div class="item-group">
            <!-- 患者编号 -->
            <el-form-item label-width="90px">
              <div slot="label" class="item-title">患者编号</div>
              <!-- <div slot="label" class="item-title"></div> -->
              <el-input
                style="width: 200px"
                v-model="searchForm.ptdtPatientId"
                oninput="if(value>100000000000000)value=100000000000000;if(value.length>20)value=value.slice(0,20);if(value<0)value==0"
                onkeyup="this.value=this.value.replace(/\D/g,'')"
                :disabled="!checkMap.ptdtPatientId"
                clearable />
            </el-form-item>

            <!-- 姓名 -->
            <el-form-item label-width="90px">
              <div slot="label" class="item-title">
                <!-- <el-checkbox
                  v-model="checkMap.ptName"
                  style="margin-right: 4px"
                /> -->
                姓{{ '\u2003' }}名
              </div>
              <el-input style="width: 200px" v-model="searchForm.ptName" :disabled="!checkMap.ptName" clearable />
            </el-form-item>

            <!-- 检查号 -->
            <el-form-item label-width="90px">
              <div slot="label" class="item-title">
                <!-- <el-checkbox
                  v-model="checkMap.ptdtCheckCode"
                  style="margin-right: 4px"
                /> -->
                检查号
              </div>
              <el-input
                style="width: 200px"
                v-model="searchForm.ptdtCheckCode"
                :disabled="!checkMap.ptdtCheckCode"
                clearable />
            </el-form-item>
          </div>

          <!-- 门诊号 -->
          <div class="item-group">
            <el-form-item label-width="70px">
              <div slot="label">
                <!-- <el-checkbox
                  v-model="checkMap.patientNumber"
                  style="margin-right: 4px"
                /> -->
                门诊号
              </div>
              <el-input
                style="width: 200px"
                v-model="searchForm.patientNumber"
                :disabled="!checkMap.patientNumber"
                clearable />
            </el-form-item>
            <!-- 拼音 -->
            <el-form-item label-width="70px">
              <div slot="label">
                <!-- <el-checkbox
                  v-model="checkMap.spell"
                  style="margin-right: 4px"
                /> -->
                拼{{ '\u2003' }}音
              </div>
              <el-input style="width: 200px" v-model="searchForm.spell" :disabled="!checkMap.spell" clearable />
            </el-form-item>
          </div>

          <div class="item-group g2">
            <el-form-item label="检查状态" label-width="80px">
              <el-select v-model="searchForm.checkState" clearable placeholder="请选择">
                <el-option
                  v-for="(item, index) in dropDownStateData"
                  :key="index"
                  :label="item.statuscn"
                  :value="item.statuscn" />
              </el-select>
            </el-form-item>
            <el-form-item label="我的报告" label-width="80px">
              <el-select v-model="searchForm.myReport" clearable placeholder="请选择">
                <el-option
                  v-for="(item, index) in completeStatusData"
                  :key="index"
                  :label="item.status"
                  :value="item.status" />
              </el-select>
            </el-form-item>
            <el-form-item label="检查项目名" label-width="80px">
              <el-select v-model="searchForm.checkItem" clearable placeholder="请选择">
                <el-option v-for="(item, index) in downCheckData" :key="index" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </div>
          <div class="item-group">
            <!-- <el-button size="mini">高级查询</el-button> -->
            <el-button @click="empty" type="danger"></el-button>
            <el-button @click="doSearch" type="primary">搜索</el-button>
          </div>
        </el-form>
      </div>
    </div>

    <!-- 搜索表单 -->

    <!-- 数据列表 -->
    <div class="table">
      <el-table
        :header-cell-style="{ background: '#e5f5ff' }"
        ref="reportList"
        v-loading="listLoading"
        element-loading-text="加载中..."
        empty-text="暂无数据"
        :data="reportList"
        :row-class-name="tableRowClassName"
        highlight-current-row
        @sort-change="sortChange"
        class="reportList">
        <el-table-column prop="ptdtCheckCode" label="检查号" width="120" align="center" sortable />
        <el-table-column prop="ptdtPatientId" label="患者编号" width="90" align="center" sortable />
        <el-table-column
          prop="ptName"
          label="姓名"
          width="140"
          align="center"
          sortable
          :sort-method="
            (a, b) => {
              return a[item.props] - b[item.props]
            }
          " />
        <el-table-column prop="ptSex" label="性别" width="60" align="center" />
        <el-table-column
          prop="ptdtCheckMachine"
          label="检查类型"
          width="150"
          align="center"
          sortable
          :sort-method="
            (a, b) => {
              return a[item.props] - b[item.props]
            }
          " />
        <el-table-column
          prop="ptdtCheckName"
          label="检查项目"
          width="330"
          align="center"
          sortable
          :sort-method="
            (a, b) => {
              return a[item.props] - b[item.props]
            }
          " />

        <el-table-column prop="status" label="检查状态" width="150" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.color" disable-transitions>{{ scope.row.statusName }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="" label="" align="center" />
        <el-table-column align="center" prop="ctrl" width="200" label="操作" fixed="right">
          <template slot-scope="scope">
            <div class="box">
              <div class="overview" @click="overview(scope.row)">浏览</div>
              <div class="edit-btn" @click="doEdit(scope.row)">编辑</div>
              <div class="contrast" @click="contrast(scope.row)">对比报告</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :page-count="total"
      :page-size="pageSize"
      :current-page="pageNum"
      @current-change="changePage" />

    <!-- 浏览详情 -->
    <el-drawer title="详情" :visible.sync="drawer" :modal-append-to-body="false" direction="rtl" size="100%">
      <div class="info-card history">
        <div class="card-title">病史内容</div>
        <div class="card-content" v-for="(item, index) in bgReadyTxt" :key="index">
          <div class="time">时间：{{ item.ptdtCheckDate || '无' }}</div>
          <div class="record">
            <div style="flex-shrink: 0">内容：</div>
            <div>{{ item.ptdtBgreadyTxt || '无' }}</div>
          </div>
        </div>
      </div>

      <div class="info-card follow">
        <div class="card-title">随访结果</div>
        <div class="card-content" v-for="(item, index) in follow" :key="index">
          {{ item || '无' }}
        </div>
      </div>

      <div class="info-card finding">
        <div class="card-title">检查所见</div>
        <div class="card-content" v-for="(item, index) in checkSee" :key="index">
          <div class="time">时间：{{ item.ptdtCheckDate }}</div>
          <div class="record">
            <div style="flex-shrink: 0">内容：</div>
            <div>{{ item.ptdtCheckSjTxt || '无' }}</div>
          </div>
        </div>
      </div>

      <div class="info-card advice">
        <div class="card-title">检查意见</div>
        <div class="card-content" v-for="(item, index) in checkOpinion" :key="index">
          <div class="time">时间：{{ item.ptdtCheckDate || '无' }}</div>
          <div class="record">
            <div style="flex-shrink: 0">内容：</div>
            <div>{{ item.ptdtCheckyjTxt || '无' }}</div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  patientInfoList,
  getDropDownCheckName,
  getEquipment,
  getDropDownState,
  getBgReadyTxt,
  getSurvey,
  getCheckSee,
  getCheckOpinion,
  getCompleteStatus,
} from '@/api/report'

import XTabs from '@/components/XTabs.vue'
export default {
  name: 'Report',
  components: {
    XTabs,
  },
  data() {
    return {
      // 搜索表单
      checkMap: {
        ptdtPatientId: true, // 患者id
        ptName: true, // 姓名
        ptdtCheckCode: true, // 检查号
        spell: true, // 拼音
        patientNumber: true, // 门诊号
      }, // 选择框
      searchForm: {
        ptdtPatientId: '', // 患者id
        ptName: '', // 姓名
        ptdtCheckCode: '', // 检查号
        patientNumber: '', // 门诊号
        spell: '', // 拼音
        ptdtCheckMachine: 'SPECT/CT',
        checkItem: '', // 检查项目名
        checkState: '', // 检查状态
        myReport: '', // 我的报告
      },

      // 数据列表
      reportList: [], //所有数据
      currentRow: {},
      bgReadyTxt: null, //病史
      follow: {}, //随访
      checkSee: {}, //检查所见
      checkOpinion: {}, //检查意见
      total: 0, //表格数据总条数
      pageNum: 1, //页数
      pageSize: 10, //每页大小
      listLoading: false, // 加载动画
      drawer: false,

      downCheckData: null, // 检查项目-下拉框
      dropDownStateData: null, //检查状态-下拉框
      completeStatusData: null, //我的报告-下拉框
      searcheCondition: {}, //搜索条件

      equipmentList: [], //设备列表
      equipment: {}, //当前设备

      albumpic_big: '',

      topImg: {
        // 'PET/CT': require('../../assets/shebei_images/PETCT.jpg'),
        // 'SPECT/CT': require('../../assets/shebei_images/SPECT.jpg'),
        // 'PET/MR': require('../../assets/shebei_images/PETMR.jpg'),
        // 'BMD': require('../../assets/shebei_images/BMD.jpg'),
      },
    }
  },
  created() {
    this.getEquipmentData() //获取设备列表
  },
  activated() {
    this.getEquipmentData()
  },
  methods: {
    // 排序函数
    sortChange(e) {
      console.log(e, 'sortChange')
    },
    setBgColor(bgColor) {
      if (bgColor === '' || bgColor === '' || bgColor === undefined) {
        return { background: 'url(' + bgColor + ') center center no-repeat' }
      } else {
        return {
          background: 'url(' + bgColor + ') center center no-repeat',
        }
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.color === 'danger' || row.status === '1') {
        return 'finished-color'
      }
      if (row.status === '2') {
        return 'success-color'
      }
      return ''
    },
    async downCheckName() {
      // 获取-检查项目下拉框
      let data = await getDropDownCheckName()
      this.downCheckData = data.data
    },
    async DownState() {
      //获取-检查状态下拉框
      let data = await getDropDownState()
      console.log(data)
      this.dropDownStateData = data.data
    },
    async completeStatus() {
      //获取-我的报告下拉框
      let data = await getCompleteStatus()
      let arr = []
      for (let key in data.data) {
        let obj = {}
        if (key == 0) {
          obj.id = key
          obj.status = '未完成'
        } else if (key == 1) {
          obj.id = key
          obj.status = '已完成'
        } else if (key == 2) {
          obj.id = key
          obj.status = '已批改评分'
        }
        arr.push(obj)
      }
      this.completeStatusData = arr
    },
    async getSurveyData(reportId) {
      //浏览---病史
      let data = await getSurvey(reportId)
      this.bgReadyTxt = data.data
    },
    async getBgReadyTxtData(reportId) {
      //浏览---随访结果
      let data = await getBgReadyTxt(reportId)
      this.follow = data.data
    },
    async getCheckSeeData(reportId) {
      //浏览---检查所见
      let data = await getCheckSee(reportId)
      this.checkSee = data.data
    },
    async getCheckOpinionData(reportId) {
      //浏览---检查意见
      let data = await getCheckOpinion(reportId)
      this.checkOpinion = data.data
      console.log('浏览---检查意见=>', data)
    },

    async getEquipmentData() {
      //获取设备
      let res = await getEquipment()
      console.log('获取设备数据', res)
      if (res.code == 200) {
        this.equipmentList = res.equipment.map((item) => {
          return { equipmentName: item.equipmentName, id: item.id }
        })
      }
    },

    getList(obj) {
      //获取第一页数据
      this.listLoading = true // 加载动画
      console.log('传递的参数', obj)

      patientInfoList(obj).then((res) => {
        this.listLoading = false // 隐藏动画
        let { rows, total } = res
        total = Math.floor(total / 10) + 1
        this.total = total
        this.reportList = rows
        console.log('reportList', rows)
      })
    },

    changePage(pageNum) {
      // 切换页码
      this.pageNum = pageNum
      let params = { pageNum: this.pageNum, pageSize: this.pageSize }
      let obj = this.searcheCondition
      let newObj = Object.assign(params, obj)
      this.getList(newObj)
    },

    overview(objData) {
      // 点击浏览
      this.drawer = true
      let { reportId } = objData
      console.log('浏览id', reportId)
      this.getSurveyData(reportId)
      this.getBgReadyTxtData(reportId)
      this.getCheckSeeData(reportId)
      this.getCheckOpinionData(reportId)
    },

    doEdit(objData) {
      // 编辑按钮
      console.log('点击编辑的数据', objData)
      let { reportId, status } = objData
      this.$router.push({
        path: `/report/editReport/${reportId}`,
        query: { status },
      })
    },

    contrast(objData) {
      //对比数据
      let { reportId, status } = objData
      console.log(objData)
      this.$router.push({
        name: 'Contrast',
        query: { reportId, status },
        params: {},
      })
    },

    doSearch() {
      // 搜索
      if (Object.keys(this.equipment).length == 0) {
        return
      }
      this.pageNum = 1
      this.pageSize = 10
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ptdtCheckMachine: this.searchForm.ptdtCheckMachine,
      }
      let obj = {}
      for (let key in this.checkMap) {
        if (this.checkMap[key]) {
          obj[key] = this.searchForm[key]
        }
      }

      //判断检查状态
      this.dropDownStateData.forEach((item) => {
        if (item.statuscn == this.searchForm.checkState) {
          obj.ptdtStatus = item.status
        }
      })

      obj.ptdtCheckName = this.searchForm.checkItem

      if (this.searchForm.myReport == '未完成') {
        obj.status = '0'
      } else if (this.searchForm.myReport == '已完成') {
        obj.status = '1'
      } else if (this.searchForm.myReport == '已批改评分') {
        obj.status = '2'
      }

      //判断患者id是不是数字  和  是不是空
      if (isNaN(this.searchForm.ptdtPatientId) == false || this.searchForm.ptdtPatientId == '') {
        this.searcheCondition = obj
        let newObj = Object.assign(params, obj)
        console.log('搜索参数', newObj)
        this.getList(newObj)
      } else {
      }
    },

    empty() {
      //清空---按钮
      for (let key in this.searchForm) {
        this.searchForm[key] = ''
      }
      this.$set(this.searchForm, 'dateTime', '不指定')
      this.$set(this.searchForm, 'print', '不指定')
      this.$set(this.searchForm, 'equipment', '不指定')
    },

    changeEquipmen(e) {
      //选择设备标题
      this.equipment = e
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ptdtCheckMachine: this.equipment.item.equipmentName,
      }
      this.searchForm.ptdtCheckMachine = this.equipment.item.equipmentName
      console.log(this.ptdtCheckMachine, 'changeEquipmen')
      let obj = Object.assign(params, this.searcheCondition)
      this.getList(obj) // 获取列表数据
      this.downCheckName() //检查项目下拉框
      this.DownState() //检查状态下拉框
      this.completeStatus() //我的报告下拉框
      let str = e.item.equipmentName
      this.albumpic_big = this.topImg[str]
    },
  },
  watch: {
    reportList: {
      deep: true,
      handler(list) {
        list.forEach((item) => {
          //判断检查状态
          switch (item.status) {
            case '0':
              item.statusName = '未完成'
              item.color = 'info'
              break
            case '1':
              item.statusName = '已完成'
              item.color = 'danger'
              break
            case '2':
              item.statusName = '已批改'
              item.color = 'success'
              break
          }
        })
        console.log(11111111111111, list)
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 60px);
  box-sizing: border-box;
  overflow-y: auto;
  padding: 30px;
  // background: url('../../assets/shebei_images/BMD.jpg') center center no-repeat;
  width: 100%;
  background-size: 100% 100% !important;

  .el-table {
    box-shadow: 4px 0px 25px 5px rgba(125, 123, 123, 0.249);
  }
  ::v-deep .el-table {
    .finished-color {
      background: #fcedea;
    }
    .success-color {
      background: #e5f9ee;
    }
  }

  ::v-deep .el-form {
    align-items: center;
    justify-content: space-between;
  }

  .tabs-container {
    background-color: rgba(0, 0, 0, 0);
  }

  // 搜索表单
  .searchForm {
    display: flex;
    justify-content: left;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 10px;

    // 搜索组
    .item-group {
      // display: block;
      display: block;
      width: 300px;
      padding: 0px 5px;

      .el-form-item {
        margin-bottom: 5px;
      }

      .item-title {
        display: flex;
        justify-content: end;
        width: 80px;
      }
    }

    .g2 {
      width: 300px;

      ::v-deep input {
        text-align: center;
        width: 220px;
      }
    }

    // 覆盖el-form

    ::v-deep .el-form-item__label,
    ::v-deep .el-radio__label {
      font-weight: normal;
      font-size: 14px;
      line-height: 30px;
      padding: 0px 5px 0px;
      margin: 0;
    }
  }

  // 覆盖el-table

  // 数据列表
  .reportList {
    margin-top: 40px;
  }

  .edit-btn,
  .overview,
  .contrast {
    display: inline-block;
    padding: 0px 10px;

    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }

  .edit-btn,
  .contrast {
    color: #409eff;
  }

  .overview {
    color: #909399;
  }

  // 覆盖el-drawer样式
  ::v-deep .el-drawer {
    max-width: 950px;

    .el-drawer__header {
      padding-bottom: 20px;
      margin: 0px;
      box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
    }

    .el-drawer__body {
      padding-bottom: 15px;
      background-color: #fafafa;
    }
  }

  // 详情信息
  .info-card {
    // background-color: red;
    padding: 15px;
    margin: 15px 15px 0px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

    .card-title {
      position: relative;
      height: 16px;
      color: #409eff;
      line-height: 16px;
      padding-left: 12px;
      margin-bottom: 15px;

      &::before {
        content: '';
        display: inline-block;
        position: absolute;
        left: 0px;
        width: 6px;
        height: 16px;
        background-color: #409eff;
      }
    }

    .card-content {
      font-size: 14px;
      line-height: 20px;
      color: #606266;
      white-space: pre-wrap;
      white-space: -moz-pre-wrap;
      white-space: -pre-wrap;
      white-space: -o-pre-wrap;
      *word-wrap: break-word;
      *white-space: normal;
    }
  }
}

.contentTitle {
  display: flex;

  .two {
    flex: 1;
  }
}

.box {
  display: flex;
}

.date {
  margin-top: 10px;
}

.record {
  display: flex;
}

// ::v-deep .el-select.el-select--mini{
//   width: 200px;
//   input{
//     text-align: center;
//   }
// }
// ::v-deep .el-table_1_column_7>.cell{
//   color: red;
// }
.equipment {
  margin-bottom: 10px;
  padding-left: 20px;
  border-radius: 15px;
  background: #e5f5ff;
  box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}

.el-loading-mask {
  background-color: rgba(0, 0, 0, 0);
}
</style>
